<template>
    <div class="maskrelname">
        <!-- <div class="maskRealname" v-if="showMask" @click.self="maskShowRealname"> -->
        <div class="maskRealname" v-if="showMask">
          <template>
            <el-tabs style="min-height: 100px;">
              <el-tab-pane label="个人账户">
                <el-form :model="personal" :rules="rules" label-width="135px" class="demo-ruleForm">
                  <template v-if="show">
                    <div class="frompersion">
                        <div>
                          <el-form-item label="登录账号:" prop="phone">
                          <el-input v-model="personal.phone"></el-input>
                          </el-form-item>
                          <el-form-item label="个人邮箱:" prop="email">
                            <el-input v-model="personal.email"></el-input>
                          </el-form-item>
                          <el-form-item label="详细地址:" prop="address">
                            <el-input v-model="personal.address"></el-input>
                          </el-form-item>
                        </div>
                    <div>
                      <el-form-item label="姓名:" prop="name">
                        <el-input v-model="personal.name"></el-input>
                      </el-form-item>
                      <el-form-item label="选择省:" prop="province">
                        <template>
                          <el-select @change="changeCode" v-model="value6" placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </template>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="身份证号:" prop="cardCode">
                        <el-input v-model="personal.cardCode"></el-input>
                      </el-form-item>
                      <el-form-item label="选择市:" prop="city">
                        <template>
                          <el-select @change="changeCodes" v-model="value7" placeholder="请选择">
                            <el-option
                              v-for="item in options1"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </template>
                      </el-form-item>
                    </div>
                    </div>
                    <div class="upload">
                      <p>请上传身份证照片:</p>
                          <el-upload
                          ref="upload"
                          action=""
                          list-type="picture-card"
                          :limit="1"
                          :class="{hide:hideUpload}"
                          :on-change="handlePictureCardPreview"
                          :on-remove="handleRemove"
                          :auto-upload="false"
                          >
                          <i class="el-icon-plus"><span>身份证正面照</span></i>
                        </el-upload>
                        <el-upload
                          ref="upload"
                          action=""
                          list-type="picture-card"
                          :limit="1"
                          :class="{hide:hideUploads}"
                          :on-change="handlePictureCardPreviews"
                          :on-remove="handleRemoves"
                          :auto-upload="false"
                          >
                          <i class="el-icon-plus"><span>身份证反面照</span></i>
                        </el-upload>
                    </div>
                    <div class="btn">
                      <el-form-item>
                        <el-button  @click="maskShowRealname">取消</el-button>
                        <el-button @click="getkaihu" type="primary">下一步</el-button>
                      </el-form-item>
                    </div>
                  </template>
                </el-form>
                <template v-if="!show">
                  <el-form :model="personalbank" :rules="rules" label-width="135px" class="demo-ruleForm">
                  <div class="frompersion">
                    <div>
                      <el-form-item label="登录账号:" prop="phone">
                          <el-input v-model="personalbank.phone"></el-input>
                      </el-form-item>
                      <el-form-item label="银行卡号:" prop="bankNum">
                        <el-input v-model="personalbank.bankNum"></el-input>
                      </el-form-item>
                    </div>

                    <div>
                      <el-form-item label="开户银行:" prop="bank">
                      <!-- 22222222 -->
                      <template>
                          <el-select @change="bankCode" v-model="value10" placeholder="请选择">
                            <el-option
                              v-for="item in bank"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </template>
                      </el-form-item>
                      <el-form-item label="预留手机号:" prop="des">
                        <el-input v-model="personalbank.des"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="支行名称:" prop="branchName">
                        <el-input v-model="personalbank.branchName"></el-input>
                      </el-form-item>
                      <el-form :model="personalbankSure" :rules="rules" label-width="135px" class="demo-ruleForm">
                        <el-form-item label="短信验证码:" prop="sms">
                          <el-input v-model="personalbankSure.sms">
                            <el-button class="btnwidtn" :disabled="disableBtn" @click="dj" slot="append">{{content}}</el-button>
                          </el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                  <div class="btn">
                    <el-button  @click="maskShowRealname">取消</el-button>
                    <el-button @click="getsure" type="primary">确认</el-button>
                  </div>
                  </el-form>
                </template>
              </el-tab-pane>
              <el-tab-pane label="企业账户">
                <el-form v-show="paymentAuthentication" :model="enterprise" ref="myForm" :rules="rulesqy" label-width="135px" class="demo-ruleForm">
                <div class="frompersion">
                  <div>
                    <el-form-item label="登录账号:" prop="phone">
                      <el-input v-model="enterprise.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围:" prop="businessScope">
                      <el-input v-model="enterprise.businessScope"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址:" prop="address">
                      <el-input v-model="enterprise.address"></el-input>
                    </el-form-item>
                    <el-form :model="enterprisebankcard" :rules="rules" label-width="135px" class="demo-ruleForm">
                      <el-form-item label="支行名称:" prop="branchName">
                        <el-input v-model="enterprisebankcard.branchName"></el-input>
                      </el-form-item>
                    </el-form>
                    <el-form-item label="行业代码:" prop="trade">
                      <template>
                        <el-select @change="changeIndustryCode" v-model="value2" placeholder="请选择">
                          <el-option
                            v-for="item in industryCode"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </template>
                    </el-form-item>
                    <el-form-item label="营业终止日期:" prop="allLicenceExpiryDate">
                      <!-- <div class="block">
                      <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyyMMdd"
                        @change="datayTime"
                        v-model="valuetime3"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                    </div> -->
                    <div class="block">
                      <el-date-picker
                        format="yyyy-MM-dd"
                        value-format="yyyyMMdd"
                        v-model="valuetime3"
                        type="date"
                        placeholder="选择日期时间"
                        @change="datayTime"
                        :picker-options="pickerOptions">
                      </el-date-picker>
                    </div>
                    </el-form-item>
                    <el-form-item label="法人姓名:" prop="name">
                      <el-input v-model="enterprise.name"></el-input>
                    </el-form-item>
                    <el-form-item label="法人邮箱:" prop="email">
                      <el-input v-model="enterprise.email"></el-input>
                    </el-form-item>
                </div>
                <div>
                  <el-form-item label="公司名称:" prop="enterpriseName">
                    <el-input v-model="enterprise.enterpriseName"></el-input>
                  </el-form-item>
                  <el-form-item label="选择省:" prop="province">
                    <template>
                      <el-select @change="changeProvincecode" v-model="value8" placeholder="请选择">
                        <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="企业邮箱:" prop="corEmail">
                    <el-input v-model="enterprise.corEmail"></el-input>
                  </el-form-item>
                  <el-form-item label="企业银行账号:" prop="basicAcctNo">
                    <el-input v-model="enterprise.basicAcctNo"></el-input>
                  </el-form-item>
                  <el-form-item label="通用行业代码:" prop="currentIndustry">
                    <template>
                      <el-select
                        v-model="value5"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入关键词"
                        :remote-method="searchcurrentIndustry"
                        loading-text="加载中"
                          @change="searchcurrentIndustrycode"
                          clearable
                        >
                        <el-option
                          v-for="item in options5"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="注册资本(元):" prop="authCapital">
                    <el-input v-model="enterprise.authCapital"></el-input>
                  </el-form-item>
                  <el-form-item label="法人证件号码:" prop="cardCode">
                    <el-input v-model="enterprise.cardCode"></el-input>
                  </el-form-item>
                  <el-form-item label="法人证件发证日:" prop="legalPersonIssDate">
                    <div class="block">
                    <el-date-picker
                    format="yyyy-MM-dd"
                    value-format="yyyyMMdd"
                      @change="datafTime"
                      v-model="valuetime2"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="公司简称:" prop="enterpriseSimpleName">
                    <el-input v-model="enterprise.enterpriseSimpleName"></el-input>
                  </el-form-item>
                  <el-form-item label="选择市:" prop="city">
                    <template>
                      <el-select @change="changeCitycode" v-model="value9" placeholder="请选择">
                        <el-option
                          v-for="item in options3"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="企业规模:" prop="authCscaleapital">
                    <template>
                      <el-select @change="scalecode" v-model="value1" placeholder="请选择">
                        <el-option
                          v-for="item in enterpriseScale"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="开户银行:" prop="bankDeposit">
                    <template>
                      <el-select @change="bankDepositcode" v-model="value4" placeholder="请选择">
                        <el-option
                          v-for="item in bankDeposit"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="营业执照编码:" prop="unifiedSocialCreditCode">
                    <el-input v-model="enterprise.unifiedSocialCreditCode"></el-input>
                  </el-form-item>
                  <el-form-item label="分类类别:" prop="classify">
                    <template>
                      <el-select @change="changeClassifycode" v-model="value3" placeholder="请选择">
                        <el-option
                          v-for="item in Taxonomy"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                  <el-form-item label="法人联系电话:" prop="legalPersonContactNumber">
                    <el-input v-model="enterprise.legalPersonContactNumber"></el-input>
                  </el-form-item>
                  <el-form-item label="法人证件到期日:" prop="legalPersonExpiryDate">
                    <div class="block">
                    <el-date-picker
                    format="yyyy-MM-dd"
                    value-format="yyyyMMdd"
                      @change="datadTime"
                      v-model="valuetime1"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  </el-form-item>
                  
                </div>
                
              </div>
                <div class="upload">
                  <div>
                  <p>请上传附件:</p>
                  </div>
                      <el-upload
                      ref="upload"
                      action=""
                      list-type="picture-card"
                      :limit="1"
                      :class="{hide:hideUploadqy}"
                      :on-change="handlePictureCardEnterprise"
                      :on-remove="handleRemoveEnterprise"
                      :auto-upload="false"
                      >
                      <i class="el-icon-plus"><span>请上传营业执照</span></i>
                    </el-upload>
                    <el-upload
                      ref="upload"
                      action=""
                      list-type="picture-card"
                      :limit="1"
                      :class="{hide:hideUploadqys}"
                      :on-change="handlePictureCardEnterprises"
                      :on-remove="handleRemoveEnterprises"
                      :auto-upload="false"
                      >
                      <i class="el-icon-plus"><span>请上传身份证正面照</span></i>
                    </el-upload>
                    <el-upload
                      ref="upload"
                      action=""
                      list-type="picture-card"
                      :limit="1"
                      :class="{hide:hideUploadqyss}"
                      :on-change="handlePictureCardEnterprisess"
                      :on-remove="handleRemoveEnterprisess"
                      :auto-upload="false"
                      >
                      <i class="el-icon-plus"><span>请上传身份证反面照</span></i>
                    </el-upload>
                </div>
                <div class="btn">
                  <el-button @click="maskShowRealname">取消</el-button>
                  <el-button @click="enterpriseSure" type="primary">确认</el-button>
                </div>
                </el-form>
                <!-- 打款认证 -->
                <div v-show="!paymentAuthentication" class="authentication">
                  <div>
                    <span>打款认证：</span>
                    <el-input placeholder="请输入打款金额" v-model="notarize.money"></el-input>
                  </div>
                  <div class="btn">
                    <el-button @click="payAuthentication" type="primary">确认</el-button>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
    </div>
</template>

<script>
import {
  urbanCode, //获取市区
  personalName, //个人开户
  personalbank, //个人绑卡请求
  personalBankSure, //个人绑卡成功
  enterpriseCode, //获取通用行业代码
  enterpriseBank, //企业开户
  enterpriseBind, //企业绑卡
  notarizeSure//打款确认
} from "@/api/insurance/accountdetail";
export default {
  props: {
    showMask: {
      default: false
    }
  },
  data() {
    return {
      content: "获取验证码",
      totalTime: "60",
      show: true,
      // showMask: false,
      hideUpload: false, //控制图片上传
      hideUploads: false, //控制图片上传
      hideUploadqy: false, //控制图片上传
      hideUploadqys: false, //控制图片上传
      hideUploadqyss: false, //控制图片上传
      disableBtn: false,
      paymentAuthentication:true,//控制打款认证的显示隐藏
      className:true,
      notarize:{
        bankAccountName:"重庆元山元有限公司",
         money :""
      },//打款金额
      address: "",
      addressqy: "",
      bankName: "",
      banklabel: "",
      valuetime1: "",
      valuetime2: "",
      valuetime3: "",
      value: "",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      value8: "",
      value9: "",
      value10: "",
      // 营业期限
      pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          },{
            text: '长期',
            onClick(picker) {
              const date = new Date('2099-12-31 00:00:00');
              picker.$emit('pick', date);
              
            }
          }]
        },
      // 省
      options: [
        { label: "请选择省份", value: "0" },
        { label: "11-北京市", value: "1" },
        { label: "12-天津市", value: "2" },
        { label: "13-河北省", value: "3" },
        { label: "14-山西省", value: "4" },
        { label: "15-内蒙古自治区", value: "5" },
        { label: "21-辽宁省", value: "6" },
        { label: "22-吉林省", value: "7" },
        { label: "23-黑龙江省", value: "8" },
        { label: "31-上海市", value: "9" },
        { label: "32-江苏省", value: "10" },
        { label: "33-浙江省", value: "11" },
        { label: "34-安徽省", value: "12" },
        { label: "35-福建省", value: "13" },
        { label: "36-江西省", value: "14" },
        { label: "37-山东省", value: "15" },
        { label: "41-河南省", value: "16" },
        { label: "42-湖北省", value: "17" },
        { label: "43-湖南省", value: "18" },
        { label: "44-广东省", value: "19" },
        { label: "45-广西壮族自治区", value: "20" },
        { label: "46-海南省", value: "21" },
        { label: "50-重庆市", value: "22" },
        { label: "51-四川省", value: "23" },
        { label: "52-贵州省", value: "24" },
        { label: "53-云南省", value: "25" },
        { label: "54-西藏自治区", value: "26" },
        { label: "61-陕西省", value: "27" },
        { label: "62-甘肃省", value: "28" },
        { label: "63-青海省", value: "29" },
        { label: "64-宁夏回族自治区", value: "30" },
        { label: "65-新疆维吾尔自治区", value: "31" },
        { label: "71-台湾省", value: "32" },
        { label: "81-香港特别行政区", value: "33" },
        { label: "82-澳门特别行政区", value: "34" },
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则"
            }
          ]
        }
      ],
      // 企业省
      options2: [
        { label: "请选择省份", value: "0" },
        { label: "11-北京市", value: "1" },
        { label: "12-天津市", value: "2" },
        { label: "13-河北省", value: "3" },
        { label: "14-山西省", value: "4" },
        { label: "15-内蒙古自治区", value: "5" },
        { label: "21-辽宁省", value: "6" },
        { label: "22-吉林省", value: "7" },
        { label: "23-黑龙江省", value: "8" },
        { label: "31-上海市", value: "9" },
        { label: "32-江苏省", value: "10" },
        { label: "33-浙江省", value: "11" },
        { label: "34-安徽省", value: "12" },
        { label: "35-福建省", value: "13" },
        { label: "36-江西省", value: "14" },
        { label: "37-山东省", value: "15" },
        { label: "41-河南省", value: "16" },
        { label: "42-湖北省", value: "17" },
        { label: "43-湖南省", value: "18" },
        { label: "44-广东省", value: "19" },
        { label: "45-广西壮族自治区", value: "20" },
        { label: "46-海南省", value: "21" },
        { label: "50-重庆市", value: "22" },
        { label: "51-四川省", value: "23" },
        { label: "52-贵州省", value: "24" },
        { label: "53-云南省", value: "25" },
        { label: "54-西藏自治区", value: "26" },
        { label: "61-陕西省", value: "27" },
        { label: "62-甘肃省", value: "28" },
        { label: "63-青海省", value: "29" },
        { label: "64-宁夏回族自治区", value: "30" },
        { label: "65-新疆维吾尔自治区", value: "31" },
        { label: "71-台湾省", value: "32" },
        { label: "81-香港特别行政区", value: "33" },
        { label: "82-澳门特别行政区", value: "34" },
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则"
            }
          ]
        }
      ],
      // 市
      options1: [],
      // 市
      options3: [],
      // 通用行业代码
      options5: [],
      // 开户银行
      bank: [
        { label: "请选择", value: "0" },
        { label: "100-邮储银行", value: "1" },
        { label: "102-工商银行", value: "2" },
        { label: "103-农业银行", value: "3" },
        { label: "104-中国银行", value: "4" },
        { label: "105-建设银行", value: "5" },
        { label: "301-交通银行", value: "6" },
        { label: "302-中信银行", value: "7" },
        { label: "303-光大银行", value: "8" },
        { label: "304-华夏银行", value: "9" },
        { label: "305-民生银行", value: "10" },
        { label: "306-广发银行", value: "11" },
        { label: "307-平安银行", value: "12" },
        { label: "308-招商银行", value: "13" },
        { label: "309-兴业银行", value: "14" },
        { label: "310-浦发银行", value: "15" },
        { label: "311-恒丰银行", value: "16" },
        { label: "441-重庆银行", value: "17" },
        { label: "1413-重庆农村商业银行", value: "18" },
        { label: "321-重庆三峡银行", value: "19" },
        { label: "1731-重庆富民银行", value: "20" },
        { label: "429-成都银行", value: "21" },
        { label: "1528-成都农村商业银行", value: "22" },
        { label: "1747-四川新网银行股份有限公司", value: "23" },
        { label: "1804-四川天府银行股份有限公司", value: "24" },
        { label: "-201-国家开发银行", value: "25" },
        { label: "440-徽商银行", value: "26" },
        { label: "1436-贵州省农村信用社联合社", value: "27" },
        { label: "1569-贵州银行", value: "28" },
        { label: "443-贵阳银行（贵阳市商业银行）", value: "29" },
        { label: "489-广东南粤银行", value: "30" },
        { label: "701-昆仑银行", value: "31" },
        { label: "316-浙商银行", value: "32" },
        { label: "317-渤海银行", value: "33" },
        { label: "1715-上海华瑞银行", value: "34" },
        { label: "1716-浙江网商银行", value: "35" },
        { label: "442-哈尔滨银行", value: "36" }
      ],
      // 企业规模
      enterpriseScale: [
        {
          value: "1",
          label: "01-大型"
        },
        {
          value: "2",
          label: "02-中型"
        },
        {
          value: "3",
          label: "03-小型"
        },
        {
          value: "4",
          label: "04-微型"
        }
      ],
      // 行业代码
      industryCode: [
        { label: "120-内资-集体全资", value: "1" },
        { label: "130-内资-股份合作", value: "2" },
        { label: "141-内资-联营-国有联营", value: "3" },
        { label: "142-内资-联营-集体联营", value: "4" },
        { label: "143-内资-联营-国有与集体联营", value: "5" },
        { label: "149-内资-联营-其他联营", value: "6" },
        { label: "152-内资-有限责任（公司）-其他有限责任（公司）", value: "7" },
        { label: "160-内资-股份有限（公司）", value: "8" },
        { label: "171-内资-私有（私营）-独资", value: "9" },
        { label: "172-内资-私有（私营）-合伙", value: "10" },
        { label: "173-内资-私有（私营）-有限责任（公司）", value: "11" },
        { label: "174-内资-私有（私营）-股份有限（公司）", value: "12" },
        { label: "176-内资-其他私有", value: "13" },
        { label: "190-内资-其他内资", value: "14" },
        { label: "210-港澳台投资-内地和港澳台合资", value: "15" },
        { label: "220-港澳台投资-内地和港澳台合作", value: "16" },
        { label: "230-港澳台投资-港澳台独资", value: "17" },
        { label: "240-港澳台投资-港澳台投资股份有限（公司）", value: "18" },
        { label: "250-港澳台投资-其他港澳台投资", value: "19" },
        { label: "310-国外投资-中外合资", value: "20" },
        { label: "320-国外投资-中外合作", value: "21" },
        { label: "330-国外投资-外资独资", value: "22" },
        { label: "340-国外投资-国外投资股份有限（公司）", value: "23" },
        { label: "350-国外投资-其他国外投资", value: "24" }
      ],
      // 分类类别
      Taxonomy: [
        { label: "202-集体企业", value: "1" },
        { label: "203-股份合作企业", value: "2" },
        { label: "204-联营企业", value: "3" },
        { label: "205-有限责任公司", value: "4" },
        { label: "206-股份有限公司", value: "5" },
        { label: "207-私营企业", value: "6" },
        { label: "208-港、澳、台投资企业", value: "7" },
        { label: "209-外商投资企业", value: "8" },
        { label: "211-乡镇企业", value: "9" },
        { label: "299-其他", value: "10" },
        { label: "324-财务公司", value: "11" },
        { label: "325-证券公司", value: "12" },
        { label: "326-证券投资基金管理公司", value: "13" },
        { label: "328-投资咨询公司", value: "14" },
        { label: "329-基金公司", value: "15" },
        { label: "330-信托公司", value: "16" },
        { label: "331-金融资产管理公司(不含国有资产管理公司)", value: "17" },
        { label: "333-金融租赁公司", value: "18" },
        { label: "334-汽车金融公司", value: "19" },
        { label: "336-货币经纪公司", value: "20" },
        { label: "350-其他金融控股公司", value: "21" },
        { label: "351-小额贷款公司", value: "22" },
        { label: "352-其他境内特殊目的载体（SPV）", value: "23" },
        { label: "353-其他金融辅助机构（不含SPV）", value: "24" },
        { label: "399-其他金融机构", value: "25" },
        { label: "501-小微企业", value: "26" }
      ],
      // 开户银行
      bankDeposit: [
        { label: "100-邮储银行", value: "1" },
        { label: "102-工商银行", value: "2" },
        { label: "103-农业银行", value: "3" },
        { label: "104-中国银行", value: "4" },
        { label: "105-建设银行", value: "5" },
        { label: "301-交通银行", value: "6" },
        { label: "302-中信银行", value: "7" },
        { label: "303-光大银行", value: "8" },
        { label: "304-华夏银行", value: "9" },
        { label: "305-民生银行", value: "10" },
        { label: "306-广发银行", value: "11" },
        { label: "307-平安银行", value: "12" },
        { label: "308-招商银行", value: "13" },
        { label: "309-兴业银行", value: "14" },
        { label: "310-浦发银行", value: "15" },
        { label: "311-恒丰银行", value: "16" },
        { label: "441-重庆银行", value: "17" },
        { label: "1413-重庆农村商业银行", value: "18" },
        { label: "321-重庆三峡银行", value: "19" },
        { label: "1731-重庆富民银行", value: "20" },
        { label: "429-成都银行", value: "21" },
        { label: "1528-成都农村商业银行", value: "22" },
        { label: "1747-四川新网银行股份有限公司", value: "23" },
        { label: "1804-四川天府银行股份有限公司", value: "24" },
        { label: "-201-国家开发银行", value: "25" },
        { label: "440-徽商银行", value: "26" },
        { label: "1436-贵州省农村信用社联合社", value: "27" },
        { label: "1569-贵州银行", value: "28" },
        { label: "443-贵阳银行（贵阳市商业银行）", value: "29" },
        { label: "489-广东南粤银行", value: "30" },
        { label: "701-昆仑银行", value: "31" },
        { label: "316-浙商银行", value: "32" },
        { label: "317-渤海银行", value: "33" },
        { label: "1715-上海华瑞银行", value: "34" },
        { label: "1716-浙江网商银行", value: "35" },
        { label: "442-哈尔滨银行", value: "36" }
      ],
      // 个人开户参数
      personal: {
        name: "", //姓名
        cardCode: "", //身份证号
        address: "", //详细地址
        email: "", //个人邮箱
        type: "2", //个人
        phone: "", //登录账号
        codePhotoJustName: "", //身份证正面
        codePhotoBackName: "", //身份证反面
        remark: [] //图片后缀
      },
      sms: "",
      // 个人绑卡参数
      personalbank: {
        bankNum: "", //银行卡号
        bankAccountType: "2",
        bankAccountName: "", //姓名
        phone: "", //这是登录手机号
        branchName: "", //支行名称
        bankId: "", //银行编码
        codeNum: "", //身份证号
        des: "" //银行预留手机号
      },
      // 个人绑卡确认
      personalbankSure: {
        txSN: "",
        sms: ""
      },
      // 企业认证参数
      enterprise: {
        phone: "", //注册的手机号
        enterpriseName: "", //公司名称 1234
        enterpriseSimpleName: "", //公司简称     1234
        trade: "", //行业代码
        classify: "", //分类类别
        currentIndustry: "", //通用行业代码
        unifiedSocialCreditCode: "", //营业执照编号
        allLicenceExpiryDate: "20991231", //银业执照有效期  20991231
        authCapital: "", //注册资本 单位分
        businessScope: "", //经营范围   1234
        cardCode: "", //法人身份证号
        basicAcctNo: "", //企业银行账户
        scale: "", //企业规模
        legalPersonIssDate: "", //法人身份证发行日期
        legalPersonExpiryDate: "", //法人身份证过期时间
        legalPersonContactNumber: "", //法人手机号
        province: "", //省编码
        city: "", //市编码
        name: "", //法人姓名
        address: "", //详细地址    1234
        type: "1", //企业
        email: "", //个人邮箱
        corEmail: "", //企业邮箱   1234
        enterprisePhotoName: "", //企业营业执照
        codePhotoBackName: "", //身份证反面
        codePhotoJustName: "", //身份证正面
        remark: [] //图片后缀
      },
      // 企业绑卡认证参数
      enterprisebankcard: {
        phone: "",
        bankId: "", //银行id 公司名字  账户号码   支行名  1
        bankAccountName: "",
        bankNum: "",
        branchName: "",
        bankAccountType: "1",
        codeNum: ""
      },
      rules: {
        phone: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
        email: [
          { required: true, message: "请填写邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        address: [
          { required: true, message: "请填写详细地址", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        province: [
          {
            required: true,
            message: "请选择省份",
            trigger: "blur"
          }
        ],
        cardCode: [
          { required: true, message: "请输入身份证号码", trigger: "blur" }
        ],
        city: [{ required: true, message: "请选择市区", trigger: "blur" }],
        bankNum: [
          { required: true, message: "请输入银行卡号", trigger: "blur" }
        ],
        bank: [{ required: true, message: "请选择开户银行", trigger: "blur" }],
        des: [{ required: true, message: "请输入银行卡号", trigger: "blur" }],
        branchName: [
          { required: true, message: "请输入支行名称", trigger: "blur" }
        ],
        sms: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      rulesqy: {
        phone: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
        email: [
          { required: true, message: "请填写个人邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        corEmail: [
          { required: true, message: "请填写企业邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        enterpriseName: [
          { required: true, message: "请填写公司名称", trigger: "blur" }
        ],
        enterpriseSimpleName: [
          { required: true, message: "请输入公司简称", trigger: "blur" }
        ],
        trade: [
          {
            required: true,
            message: "请选择行业代码",
            trigger: "blur"
          }
        ],
        classify: [
          { required: true, message: "请选择分类类别", trigger: "blur" }
        ],
        currentIndustry: [
          { required: true, message: "请选择通用行业代码", trigger: "blur" }
        ],
        unifiedSocialCreditCode: [
          { required: true, message: "请输入银业执照编号", trigger: "blur" }
        ],
        allLicenceExpiryDate: [
          { required: true, message: "请选择营业执照有效期", trigger: "blur" }
        ],
        authCapital: [
          { required: true, message: "请输入注册资本", trigger: "blur" }
        ],
        businessScope: [
          { required: true, message: "请输入经营范围", trigger: "blur" }
        ],
        cardCode: [
          { required: true, message: "请输入法人身份证号", trigger: "blur" }
        ],
        basicAcctNo: [
          { required: true, message: "请输入企业银行账号", trigger: "blur" }
        ],
        authCscaleapital: [
          { required: true, message: "请选择企业规模", trigger: "blur" }
        ],
        legalPersonIssDate: [
          { required: true, message: "请选择法人证件发证日", trigger: "blur" }
        ],
        legalPersonExpiryDate: [
          { required: true, message: "请选择法人证件到期日", trigger: "blur" }
        ],
        legalPersonContactNumber: [
          { required: true, message: "请输入法人手机号", trigger: "blur" }
        ],
        province: [{ required: true, message: "请选择省", trigger: "blur" }],
        city: [{ required: true, message: "请选择市区", trigger: "blur" }],
        name: [{ required: true, message: "请输入法人姓名", trigger: "blur" }],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        branchName: [
          { required: true, message: "请输入支行名称", trigger: "blur" }
        ],
        bankDeposit: [
          { required: true, message: "请选择开户银行", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 详情
    maskShow() {
      this.isShow = false;
    },
    // 个人绑卡
    dj() {
      this.content = this.totalTime + "s后重新发送"; //这里解决60秒不见了的问题
      this.disableBtn = true;
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          //当倒计时小于0时清除定时器
          window.clearInterval(clock);
          this.content = "重新发送验证码";
          this.totalTime = 60;
          this.disableBtn = false;
        }
      }, 1000);
      let banknames = this.personalbank.branchName;
      this.personalbank.branchName =
        this.bankName + this.personalbank.branchName;
      console.log(this.personalbank, "personalbank");
      personalbank(this.personalbank)
        .then(response => {
          this.personalbank.branchName = banknames;
          console.log(response.data.data, "response");
          if (response.data.code == "1034") {
            this.$message(response.data.msg);
            this.personalbankSure.txSN = response.data.data;
          } else {
            this.$message(response.data.msg);
          }
        })
        .catch(() => {});
    },
    bankCode(value) {
      let datas = this.bank.filter(function(item) {
        return item.value == value;
      });
      for (let i = 0; i < datas.length; i++) {
        var bankIndex = datas[i].label.indexOf("-");
        this.personalbank.bankId = datas[i].label.substring(0, bankIndex);
        this.bankName = datas[i].label.substring(
          bankIndex + 1,
          datas[i].label.length
        );
      }
    },
    /* isShow() {
      this.showMask = true;
    }, */
    maskShowRealname() {
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles();
        this.personal.remark = [];
        this.enterprise.remark = [];
        this.hideUpload = false;
        this.hideUploads = false;
        this.hideUploadqy = false;
        this.hideUploadqys = false;
        this.hideUploadqyss = false;
        this.personal.codePhotoJustName = "";
        this.personal.codePhotoBackName = "";
        this.enterprise.enterprisePhotoName = "";
        this.enterprise.codePhotoBackName = "";
        this.enterprise.codePhotoJustName = "";
      }
      // this.showMask = false;
      this.$emit("changeComponent1Data", false);
      this.show = true;
    },
    // 上传图片转为base64
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    },
    handlePictureCardPreview(file, fileList) {
      this.hideUpload = fileList.length >= 1;
      // console.log(this.hideUpload);
      this.getBase64(file.raw).then(res => {
        // console.log(res, "res");
        let index = res.indexOf(",");
        let indexs = res.indexOf(";");
        let indexss = res.indexOf("/");
        this.personal.codePhotoJustName = res.substring(index + 1, res.length);
        this.personal.remark.unshift(
          "." + res.substring(indexss + 1, indexs) + "_"
        );
        console.log(this.personal.codePhotoJustName, this.personal.remark);
      });
    },
    handlePictureCardPreviews(file, fileList) {
      this.hideUploads = fileList.length >= 1;
      this.getBase64(file.raw).then(res => {
        let index = res.indexOf(",");
        let indexs = res.indexOf(";");
        let indexss = res.indexOf("/");
        this.personal.codePhotoBackName = res.substring(index + 1, res.length);
        this.personal.remark.push("." + res.substring(indexss + 1, indexs));
      });
    },
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= 1;
      this.personal.codePhotoJustName = "";
      console.log(this.personal.remark);

      this.personal.remark.splice(0, 1);
      console.log(this.personal.remark);
    },
    handleRemoves(file, fileList) {
      this.hideUploads = fileList.length >= 1;
      this.personal.codePhotoBackName = "";
      if (this.personal.remark.length == 2) {
        this.personal.remark.splice(1, 2);
      } else {
        this.personal.remark.splice(0, 1);
      }
    },
    // 企业照片
    handlePictureCardEnterprise(file, fileList) {
      this.hideUploadqy = fileList.length >= 1;
      this.getBase64(file.raw).then(res => {
        let index = res.indexOf(",");
        let indexs = res.indexOf(";");
        let indexss = res.indexOf("/");
        this.enterprise.enterprisePhotoName = res.substring(
          index + 1,
          res.length
        );
        this.enterprise.remark.unshift(
          "." + res.substring(indexss + 1, indexs) + "_"
        );
        console.log(this.enterprise.remark);
      });
    },
    // 企业照片
    handlePictureCardEnterprises(file, fileList) {
      this.hideUploadqys = fileList.length >= 1;
      this.getBase64(file.raw).then(res => {
        let index = res.indexOf(",");
        let indexs = res.indexOf(";");
        let indexss = res.indexOf("/");
        this.enterprise.codePhotoJustName = res.substring(
          index + 1,
          res.length
        );
        if (
          this.enterprise.remark.length == 0 ||
          this.enterprise.remark.length == 1
        ) {
          this.enterprise.remark.push(
            "." + res.substring(indexss + 1, indexs) + "_"
          );
        } else {
          this.enterprise.remark.splice(
            1,
            0,
            "." + res.substring(indexss + 1, indexs) + "_"
          );
        }
      });
    },
    // 企业照片
    handlePictureCardEnterprisess(file, fileList) {
      this.hideUploadqyss = fileList.length >= 1;
      this.getBase64(file.raw).then(res => {
        let index = res.indexOf(",");
        let indexs = res.indexOf(";");
        let indexss = res.indexOf("/");
        this.enterprise.codePhotoBackName = res.substring(
          index + 1,
          res.length
        );
        this.enterprise.remark.push("." + res.substring(indexss + 1, indexs));
      });
    },
    // 删除营业执照
    handleRemoveEnterprise(file, fileList) {
      this.hideUploadqy = fileList.length >= 1;
      this.enterprise.enterprisePhotoName = "";
      this.enterprise.remark.splice(0, 1);
    },
    // 删除身份证正面
    handleRemoveEnterprises(file, fileList) {
      this.hideUploadqys = fileList.length >= 1;
      this.enterprise.codePhotoJustName = "";
      if (this.enterprise.remark.length == 1) {
        this.enterprise.remark.splice(0, 1);
      } else if (this.enterprise.remark.length == 3) {
        this.enterprise.remark.splice(1, 1);
      } else {
        for (let i = 0; i < this.enterprise.remark.length; i++) {
          if (i == 1) {
            if (this.enterprise.remark[1].indexOf("_") == -1) {
              this.enterprise.remark.splice(0, 1);
            } else {
              this.enterprise.remark.splice(1, 1);
            }
          }
        }
        console.log(this.enterprise.remark);
      }
    },
    // 删除身份证反面
    handleRemoveEnterprisess(file, fileList) {
      this.hideUploadqyss = fileList.length >= 1;
      this.enterprise.codePhotoBackName = "";
      this.enterprise.remark.pop();
    },
    //个人开户
    getkaihu() {
      let addres = this.personal.address;
      this.personal.address = this.address + this.personal.address;
      this.personalbank.bankAccountName = this.personal.name;
      this.personalbank.codeNum = this.personal.cardCode;
      let remarks = this.personal.remark;
      this.personal.remark = this.personal.remark.join("");

      personalName(this.personal)
        .then(response => {
          this.personal.remark = remarks;
          this.personal.address = addres;
          // console.log(response.data.data,"response");
          // console.log(response.data,"response.data");
          if (response.data.code == "1007") {
            this.$message(response.data.msg);
            this.show = false;
            this.disableBtn = false;
          } else {
            this.$message(response.data.msg);
          }
        })
        .catch(() => {});
    },
    // 获取市区
    changeCode(value) {
      let datas = this.options.filter(function(item) {
        return item.value == value;
      });
      for (let i = 0; i < datas.length; i++) {
        var province = datas[i].label.indexOf("-");
        var provinces = datas[i].label.substring(
          province + 1,
          datas[i].label.length
        );
        this.address = datas[i].label.substring(
          province + 1,
          datas[i].label.length
        );
      }
      urbanCode({ name: provinces })
        .then(response => {
          console.log(response.data.data, "response");
          let data = response.data.data.map(item => {
            return {
              label: item.name,
              value: item.id
            };
          });
          this.options1 = data;
          console.log(this.options1, "this.options");
        })
        .catch(() => {});
    },
    // 获取市value
    changeCodes(value) {
      console.log(value);
      let codeValue = this.options1.filter(function(item) {
        return item.value == value;
      });
      console.log(codeValue);

      for (let i = 0; i < codeValue.length; i++) {
        var codeIndex = codeValue[i].label.indexOf("-");
        this.address =
          this.address +
          codeValue[i].label.substring(
            codeIndex + 1,
            codeValue[i].label.length
          );
      }
    },
    //企业开户加绑卡
    enterpriseSure() {
      // console.log(this.enterprise);
      let remarks = this.enterprise.remark;
      this.enterprise.remark = this.enterprise.remark.join("");
      let addresqys = this.enterprise.address;
      this.enterprise.address = this.addressqy + this.enterprise.address;
      this.enterprise.authCapital = this.enterprise.authCapital * 100;
      /* this.$refs.myForm.validate(async valid => {
        console.log(valid,12);
        if (valid) {
          console.log(this.myForm,1111);
          
          } else {
          return false;
        }
      }); */
      enterpriseBank(this.enterprise)
        .then(response => {
          this.enterprise.remark = remarks;
          this.enterprise.address = addresqys;
          this.enterprise.authCapital = this.enterprise.authCapital / 100;
          console.log(response.data.data, "response");
          this.$message(response.data.msg);
          if (response.data.code == "1007") {
            this.enterprisebankcard.phone = this.enterprise.phone;
            this.enterprisebankcard.bankAccountName = this.enterprise.enterpriseName;
            this.enterprisebankcard.bankNum = this.enterprise.basicAcctNo;
            this.enterprisebankcard.branchName =
            this.banklabel + this.enterprisebankcard.branchName;
            this.enterprisebankcard.codeNum = this.enterprise.cardCode;
            enterpriseBind(this.enterprisebankcard)
              .then(response => {
                console.log(response.data.data, "response");
                this.$message(response.data.msg);
                if (code == "1034") {
                  // this.maskShow = false;
                  this.paymentAuthentication = true
                  this.$emit("changeComponent1Data", false);
                }
              })
              .catch(() => {});
          }
        })
        .catch(() => {
          this.enterprise.remark = remarks;
          this.enterprise.address = addresqys;
          this.enterprise.authCapital = this.enterprise.authCapital / 100;
        });
    },
    // 企业打款认证
    payAuthentication(){
      this.notarize.bankAccountName = this.enterprise.enterpriseName
      notarizeSure(this.notarize)
      .then(data => {
        if(data.data.code == "1036"){
          this.$message(data.data.msg);
          this.$emit("changeComponent1Data", false);
          this.paymentAuthentication = false
        }else{
          this.$message(data.data.msg);
        }
      })
      .catch(()=>{

      })
      
    },
    // 行业代码
    changeIndustryCode(value) {
      let IndustryCodedata = this.industryCode.filter(function(item) {
        return item.value == value;
      });
      console.log(IndustryCodedata);
      for (let i = 0; i < IndustryCodedata.length; i++) {
        var IndustryCodeindex = IndustryCodedata[i].label.indexOf("-");
        this.enterprise.trade = IndustryCodedata[i].label.substring(
          0,
          IndustryCodeindex
        );
        // this.bankName = IndustryCodedata[i].label.substring(IndustryCodeindex+1,IndustryCodedata[i].label.length)
      }
    },
    // 企业规模
    scalecode(value) {
      let scalecodedata = this.enterpriseScale.filter(function(item) {
        return item.value == value;
      });
      for (let i = 0; i < scalecodedata.length; i++) {
        var scaleCodeindex = scalecodedata[i].label.indexOf("-");
        this.enterprise.scale = scalecodedata[i].label.substring(
          0,
          scaleCodeindex
        );
      }
    },
    // 分类类别
    changeClassifycode(value) {
      let Classifycodedata = this.Taxonomy.filter(function(item) {
        return item.value == value;
      });
      for (let i = 0; i < Classifycodedata.length; i++) {
        var Classifycodeindex = Classifycodedata[i].label.indexOf("-");
        this.enterprise.classify = Classifycodedata[i].label.substring(
          0,
          Classifycodeindex
        );
      }
    },
    // 企业省编码
    changeProvincecode(value) {
      let Provincecodedata = this.options2.filter(function(item) {
        return item.value == value;
      });
      for (let i = 0; i < Provincecodedata.length; i++) {
        var Provincecodeindex = Provincecodedata[i].label.indexOf("-");
        var enterprisecode = Provincecodedata[i].label.substring(
          Provincecodeindex + 1,
          Provincecodedata[i].label.length
        );
        this.addressqy = enterprisecode;
        this.enterprise.province = Provincecodedata[i].label.substring(
          0,
          Provincecodeindex
        );
      }
      urbanCode({ name: enterprisecode })
        .then(response => {
          console.log(response.data.data, "response");
          let data = response.data.data.map(item => {
            return {
              label: item.name,
              value: item.id
            };
          });
          this.options3 = data;
        })
        .catch(() => {});
    },
    // 企业市编码
    changeCitycode(value) {
      let citycodedata = this.options3.filter(function(item) {
        return item.value == value;
      });
      for (let i = 0; i < citycodedata.length; i++) {
        var citycodeindex = citycodedata[i].label.indexOf("-");
        this.enterprise.city = citycodedata[i].label.substring(
          0,
          citycodeindex
        );
        var enterpriseCityCode = citycodedata[i].label.substring(
          citycodeindex + 1,
          citycodedata[i].label.length
        );
        this.addressqy = this.addressqy + enterpriseCityCode;
      }
    },
    bankDepositcode(value) {
      let bankDepositcodedata = this.bankDeposit.filter(function(item) {
        return item.value == value;
      });

      for (let i = 0; i < bankDepositcodedata.length; i++) {
        var bankDepositcodeindex = bankDepositcodedata[i].label.indexOf("-");
        this.enterprisebankcard.bankId = bankDepositcodedata[i].label.substring(
          0,
          bankDepositcodeindex
        );
        this.banklabel = bankDepositcodedata[i].label.substring(
          bankDepositcodeindex + 1,
          bankDepositcodedata[i].label.length
        );
      }
    },
    //法人证件到期日
    datadTime(value) {
      console.log(value);
      this.enterprise.legalPersonExpiryDate = value;
    },
    //法人证件发证日
    datafTime(value) {
      console.log(value);
      this.enterprise.legalPersonIssDate = value;
    },
    //营业执照到期日
    datayTime(value) {
      console.log(value);
      this.enterprise.allLicenceExpiryDate = value;
    },
    //输入关键字搜索通用行业代码
    searchcurrentIndustry(value) {
      console.log(value);
      if (value.length >= "2") {
      let arr = [];
        enterpriseCode({ name: value })
          .then(response => {
            console.log(response.data.data, "response");
            arr = response.data.data;
              this.options5.length=0
            for (let i = 0; i < arr.length; i++) {
              this.options5.push({ label: arr[i], value: i + 1 });
              
            }
          })
          .catch(() => {});
      }
    },
    // 选择通用行业代码
    searchcurrentIndustrycode(value) {
      let searchcurrentIndustrydata = this.options5.filter(function(item) {
        return item.value == value;
      });
      for (let i = 0; i < searchcurrentIndustrydata.length; i++) {
        var searchcurrentIndustryindex = searchcurrentIndustrydata[
          i
        ].label.indexOf("-");
        this.enterprise.currentIndustry = searchcurrentIndustrydata[
          i
        ].label.substring(0, searchcurrentIndustryindex);
      }
      this.options5 = [];
    },
    // 提交开户
    getsure() {
      personalBankSure(this.personalbankSure)
        .then(response => {
          console.log(response.data.data, "response");
          console.log(response.data, "response.data");
          if (response.data.code == "1036") {
            this.$message(response.data.msg);
            // this.showMask = false;
            this.$emit("changeComponent1Data", false);
          } else {
            this.$message(response.data.msg);
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.maskrelname {
  .maskRealname {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    & > div {
      width: 64%;
      background: #fff;
      padding: 20px;
      overflow: hidden;
      height: 80%;
      overflow-y: scroll;
      overflow-x: scroll;
      line-height: 30px;
      .el-tab-pane {
        .frompersion {
          width: 100%;
          display: flex;
          .el-form {
            width: 33%;
          }
          // justify-content: space-around;
        }
        .btn {
          margin-top: 20px;
          display: flex;
          justify-content: center;
          button {
            margin-right: 30px;
          }
        }
        /deep/ .el-input__inner {
          width: 180px;
        }
      }
      .upload {
        display: flex;
        justify-content: center;
        p {
          color: #606266;
          font-size: 14px;
          margin: 0;
          margin-right: 10px;
        }
        span {
          font-size: 14px;
          margin-right: 20px;
        }
        /deep/ .el-upload--picture-card {
          margin-right: 20px;
          & > i {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            span {
              margin: 10px 0 0 0;
            }
          }
        }
      }
      .btnwidtn {
        width: 120px;
        display: flex;
        justify-content: center;
      }
    }
    & > div::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }

    /deep/ .hide .el-upload--picture-card {
      display: none;
    }
  }
  .upload {
    display: flex;
    justify-content: center;
    p {
      color: #606266;
      font-size: 14px;
      margin: 0;
      margin-right: 10px;
    }
    span {
      font-size: 14px;
      margin-right: 20px;
    }
    /deep/ .el-upload--picture-card {
      margin-right: 20px;
      & > i {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        span {
          margin: 10px 0 0 0;
        }
      }
    }
  }
  .authentication{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    & > div{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        width: 90px;
      }
    }
  }
  .el-input{
    width: auto;
  }
  .hiden {
    display: none;
  }
  /deep/ .el-form-item__error {
    width: 135px;
  }
  
}
</style>